<!--
 * @Author: shuai
 * @Date: 2023-03-28 10:48:08
 * @LastEditors: shuai
 * @LastEditTime: 2023-03-28 17:16:42
 * @Description: file content
-->
<template>
  <Tettgen-echarts-com :option = option style="width: 100%;height: 400px;" ></Tettgen-echarts-com>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
// getData是一个返回promise的函数
import getData from './data1'
// echarts基础设置，例如标题，坐标轴等
const option = reactive({
  title: {
    text: 'ECharts 柱状图示例'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: { type: 'cross' }
  },
  legend: {},
  xAxis: {
    type: 'category'
  },
  yAxis: {
    type: 'value',
    name: '销量'
  }
})
// 动态获取数据
getData().then(data => {
  Object.assign(option, {
    dataset: { source: data },
    series: [
      {
        name: '销量',
        type: 'bar',
        encode: {
          x: 'xVal',
          y: 'yVal'
        }
      }
    ]
  })
})
</script>

<style scoped lang="scss">

</style>
